<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>游戏 | Hugo Theme Dream</title>

    



<meta name="author" content="Lindixuan" />
<meta name="description" content="" />



<meta name="generator" content="Hugo 0.63.2" />

<link rel="canonical" href="https://lindixuan.gitee.io/post/%E6%B8%B8%E6%88%8F/" />


<meta property="og:title" content="游戏" />
<meta property="og:description" content="" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://lindixuan.gitee.io/post/%E6%B8%B8%E6%88%8F/" />
<meta property="article:published_time" content="2020-10-04T18:36:23+08:00" />
<meta property="article:modified_time" content="2020-10-04T18:36:23+08:00" />



<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="游戏"/>
<meta name="twitter:description" content=""/>


<link rel="stylesheet" href="/css/semantic.min.css" />
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css" />
<link rel="stylesheet" href="/css/github-markdown.css" />
<link rel="stylesheet" href="/css/site.css" />


<style>
  a {
    color: seagreen !important;
  }
</style>



<style>
  .inverted a {
     color: darkseagreen !important;
  }
</style>


    


  
    <link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/gruvbox-light.min.css" />
  



  </head>

  
  <body style="background: white;">
  
    
<nav class="ui secondary inverted menu dream-menu">

  <div class="item">
    <i class="large link bullseye icon dream-flip-toggle" title="Flip it!"></i>
  </div>
  <div class="item">
    <i class="large link home icon" title="Home" onclick="window.location.href = 'https:\/\/lindixuan.gitee.io'"></i>
  </div>
  <div class="item">
    <i class="large link icon theme-switch" onclick="themeSwitch()"></i>
  </div>
  
  <div class="item">
    <i class="large link search icon" onclick="toggleSearch()"></i>
  </div>
  
</nav>

    <div class="flip-container">
      <div class="flipper">
        <section class="front">
          <div class="dream-max-width">
            
<div class="ui centered relaxed grid dream-grid">
  <div class="sixteen wide mobile sixteen wide tablet twelve wide computer column markdown-body dream-single">

    <section class="ui top attached segment" id="dream-save-post-as-img">
      <header style="margin-top: 0 !important;">
        <h1 class="ui large header">
          游戏
          <div class="sub header">
            @
            
              Lindixuan
            
            · Sunday, Oct 4, 2020
            · 1 minute read
            · Update at Oct 4, 2020
          </div>
        </h1>
      </header>

      
        <img class="ui image" style="margin-top: 2rem;" src="" />
      

      <article style="margin-top: 2rem;"><h1 id="小鼠走迷宫游戏">小鼠走迷宫游戏</h1>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E6%A6%82%E5%86%B5.png" alt="概况"><br>
游戏简介：一只老鼠落入了一个迷宫内，我们的任务是帮助他走到右下角的迷宫出口。然而，老鼠的体力是有限的，每次移动都会消耗体力。幸运的是，迷宫里有很多猫，老鼠可以通过吃迷宫里的猫恢复体力。尝试体力耗尽前走出迷宫吧！</p>
<h2 id="制作过程">制作过程</h2>
<p>首先，我本来只是想做一个迷宫出来。当我简单的搭建出迷宫后，觉得只是单纯地走迷宫大概有点单调，所以想在地图上加一些得分点，引导玩家去走不同的路。然后，我还是觉得游戏不够刺激，应该加入一些紧张的机制，玩家才会有兴趣去尝试。我本来想像吃豆人一样加一些鬼进去追逐玩家，然而迷宫里死路太多，太容易失败了。于是我把“得分”改成了“体力”，通过不断的“续命”才能走到终点，这样，玩家在考虑前进路线时需要更加慎重，也不太可能有一路乱走最后走到终点的情况。</p>
<h2 id="1制作地图">（1）制作地图</h2>
<p>地图：我想做一个大迷宫，所以整个地图大小是2560x1438，以此保证有多种方法走到终点，有足够多的尝试。<br>
墙块：墙块做的很简单，用一个矩形和一个圆形做出了50x50的墙块。</p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E5%88%B6%E4%BD%9C%E5%A2%99%E5%9D%97.png" alt="墙"><br>
然后，一块块的拼出一个迷宫。不得不说是一个体力活，要考虑的很多，不能让迷宫看起来很简单，要给出很多分叉路口选择，同时也要设计出一些陷阱。</p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E5%88%B6%E4%BD%9C%E8%BF%B7%E5%AE%AB.png" alt="地图"></p>
<h2 id="2制作对象">（2）制作对象</h2>
<p>老鼠：<br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E5%88%B6%E4%BD%9C%E8%80%81%E9%BC%A0%E5%AF%B9%E8%B1%A1.png" alt="老鼠"><br>
猫：<br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E7%8C%AB%E5%AF%B9%E8%B1%A1.png" alt="猫"></p>
<p>为了避免老鼠出现倒着走路的情况，当我们向左走的时候给老鼠设置一个镜像，向右走的时候关闭镜像。<br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E9%95%9C%E5%83%8F.png" alt="镜像"></p>
<h2 id="3体力">（3）体力</h2>
<p><strong>首先设置一个全局变量“体力”</strong><br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E4%BD%93%E5%8A%9B1.png" alt="体力1"> <br>
<strong>每走一步都会减少体力值</strong><br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E4%BD%93%E5%8A%9B2.png" alt="体力2"></p>
<p><strong>当老鼠吃猫后，将猫销毁，并加上体力值</strong><br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E4%BD%93%E5%8A%9B3.png" alt="体力3"></p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E4%BD%93%E5%8A%9B4.png" alt="体力4"></p>
<p><strong>当体力值降为0时，游戏结束</strong><br>
<img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E4%BD%93%E5%8A%9B5.png" alt="体力5"></p>
<h2 id="4显示体力值">（4）显示体力值</h2>
<p>我希望将体力值显示在左上角，让玩家在走迷宫的过程中能看到自己的体力值。所以，要先创建一个新的图层，来显示我们的体力值。</p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E6%98%BE%E7%A4%BA%E4%BD%93%E5%8A%9B1.png" alt="显示1"></p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E6%98%BE%E7%A4%BA%E4%BD%93%E5%8A%9B2.png" alt="显示2"></p>
<p>然后，我们要保证每一帧都更新体力值。</p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E6%98%BE%E7%A4%BA%E4%BD%93%E5%8A%9B3.png" alt="显示3"></p>
<p>最后，我们把视差设为0，那么就可以保证体力值一直显示在左上角了。</p>
<p><img src="https://lindixuan.gitee.io/post/assets/%E8%BF%B7%E5%AE%AB/%E8%A7%86%E5%B7%AE.png" alt="视差"></p>
<h2 id="游戏链接">游戏链接</h2>
<p><a href="https://www.construct.net/en/free-online-games/mouse-labyrinth-18257/play">https://www.construct.net/en/free-online-games/mouse-labyrinth-18257/play</a></p>
<h2 id="演示视频">演示视频</h2>
<p><a href="https://www.bilibili.com/video/BV1Ry4y1k7st/">https://www.bilibili.com/video/BV1Ry4y1k7st/</a></p></article>
    </section>

    <footer class="ui attached segment dream-tags">
      
          <a class="ui label">No Tags</a>
      
      <div
        class="ui label"
        style="float: right; cursor: pointer;"
        onclick="savePostAsImg()">
        <i class="save icon"></i>Save as image
      </div>
    </footer>

    

    
    
    

  </div>
  <div class="sixteen wide mobile sixteen wide tablet four wide computer column">
    <article class="dream-header">
  <section class="ui top attached center aligned segment">
    <div class="ui small circular image">
      
        <img src="/img/sleep.jpg">
      
    </div>

    
    <h1 class="ui medium header">Lindixuan&#39;s blog<div class="sub header" style="margin-top: 0.5rem;">好耶！</div>
    </h1>
    

    <div class="ui horizontal list">
      
      <a class="item" href="/tags">
        <i class="tags icon" title="All Tags"></i>
      </a>
      <a class="item" href="/categories">
        <i class="th list icon" title="All Categories"></i>
      </a>
    </div>
  </section>

  

  

  <section class="ui attached segment header-socials">
    <nav class="ui secondary menu dream-menu dream-socials">
  
  
    <div class="item">
      <a href="mailto:1228210482@qq.com">
        <i class=" mail icon" title="Email"></i>
      </a>
    </div>
  

  

  

  

  

  

  

  
</nav>

  </section>

  <section class="ui bottom attached center aligned segment">
    
      <p>© 2020 - 2021 Hugo Theme Dream</p>
    

    <p>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a> with theme <a href="https://github.com/g1eny0ung/hugo-theme-dream" target="_blank">Dream</a>.</p>

    
  </section>
</article>

  </div>
</div>

          </div>
        </section>
        <section class="back">
          <div class="dream-max-width">
            <div class="ui centered relaxed grid dream-grid dream-back">
  
  
  

  <section class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    <article>
      <div class="ui top attached segment">
        <h3 class="ui header">Social Links</h3>
      </div>
      <div class="ui bottom attached segment">
        <nav class="ui secondary menu dream-menu dream-socials">
  
  
    <div class="item">
      <a href="mailto:1228210482@qq.com">
        <i class="large mail icon" title="Email"></i>
      </a>
    </div>
  

  

  

  

  

  

  

  
</nav>

      </div>
    </article>
  </section>

  <section class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    
  </section>

  
    
  
</div>

          </div>
        </section>
      </div>
    </div>

    <script>
  window.darkNav =  true 
</script>
<script src="/js/jquery.min.js"></script>
<script src="/js/semantic.min.js"></script>
<script src="/js/jquery.overlayScrollbars.min.js"></script>
<script src="/js/header.js"></script>
<script src="/js/main.js"></script>
<script src="/js/theme.js"></script>

    
<script src="/js/html2canvas.min.js"></script>
<script src="/js/post.js"></script>


  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>

  
    
      <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/ocaml.min.js"></script>
     
  

  <script>
  hljs.initHighlightingOnLoad()
  setHighlightTheme()

  function setHighlightTheme() {
    var isDark = localStore.getItem('hugo-theme-dream-is-dark')
    var lightTheme = "gruvbox-light"
    var darkTheme = "gruvbox-dark"
    var theme = isDark ? darkTheme : lightTheme

    $('link[data-highlight]').attr('href', 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/' + theme + '.min.css')
    $('pre').css('background', isDark ? '#333' : '')
  }
</script>





    
      <div class="ui inverted segment" id="dream-search">
  <div class="ui search">
    <div class="ui transparent input">
      <input class="prompt" type="text" placeholder="Search" />
    </div>
    <div class="results"></div>
  </div>
</div>
<script>
  $(document).ready(function () {
    $.getJSON('https:\/\/lindixuan.gitee.io/index.json', function (data) {
      $('.ui.search').search({
        source: data,
        searchFields: ['title'],
        showNoResults: true,
      })
    })
  })
</script>
<script src="/js/search.js"></script>

    

    
  </body>
</html>
